<template>
  <div class="ScreenShot" >
    <label style="margin-left: 110px;margin-right: 10px" >箱唛图片  </label>
    <div v-show="!show" class="pasteInputDiv" style="display: inline-block" @paste="handlePaste">
      <input type="text" class="pasteInput" autosize
             placeholder="请粘贴图片到此处" maxlength="0">
    </div>
    <div v-if="show" class="pasteImgDiv">
      <i class="el-icon-error close-position"  @click="deleteImg" />
      <el-image
        class="pasteImg"
        :src="url"
        fit="fill"
        :z-index="99999"
      >
      </el-image>
    </div>
  </div>
</template>
<script>

import {mRequest} from '@/utils/request'
import {API_DEFAULT_CONFIG} from '@/config'

export default {
  name: 'screenshotUpload',
  props: {
    httpRequest: {
      type: Function,
      default: function() {
        return 'null'
      }
    },
    attrUrl: {
      // eslint-disable-next-line no-undefined
      type: String || null || undefined
    },
    callback2: {
      type: Function,
      default: () => {
      }
    },
  },
  computed: {
    /**
     * @return {string}
     */
    URL() {
      return `${this.imageUrl}${this.urlAttr}?token=${this.token}`
    },
    token() {
      return this.$cookie.get('token')
    },
    imageUrl() {
      return `${API_DEFAULT_CONFIG.baseURL}/pub`
    },
    srcList() {
      return [`${this.imageUrl}${this.urlAttr}?token=${this.token}`]
    }
  },
  data() {
    return {
      show: false,
    //  srcList: [],
      url: '',
      urlAttr: [],
      file: null
    }
  },
  watch:{
    url() {
      if (this.url === '') {
        this.show = false
        this.urlAttr = []
      } else {
        this.show = true
      }
    },
    attrUrl: {
      handler() {
        if (this.R.isNil(this.attrUrl) || this.R.equals('', this.attrUrl.trim())) {
          this.url = null
        } else {
          this.url = `${API_DEFAULT_CONFIG.baseURL}/pub/${this.attrUrl}?token=${this.token}`
        }
      },
      deep: true
    }
  },
  methods: {
    handlePaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
      let file = null
      if (!items || items.length === 0) {
        this.$message.error('当前浏览器不支持本地')
        return
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          break
        }
      }
      if (!file) {
        this.$message.error('粘贴内容非图片')
        return
      }
      // 此时file就是我们的剪切板中的图片对象
      const reader = new FileReader()
      reader.onload = (event) => {
        this.show = true
        this.uploadImageBase( event.target.result)
      }
      reader.readAsDataURL(file)
      this.$emit('imgFile', file)
      this.file = file
    },
    deleteImg() {
      console.log('deleteImg')
      this.url = ''
      this.show = false
      this.$emit('imgFile', '')
      this.$emit('imgBase64', '')
    },
    uploadImageBase(value) {
      mRequest('systemApi/uploadImageBase', {'imageBase': value}, (res) => {
        this.urlAttr = this.R.pathOr([], ['data', 'imageUrl'], res)
        this.url= `${this.imageUrl}${this.urlAttr}?token=${this.token}`
        this.callback2(this.urlAttr)
      })
    }
  }
}
</script>
<style scoped>
.ScreenShot{
  margin-top: 10px;}
.pasteInputDiv{
  box-sizing: border-box;
  width: 158px;
  height: 158px;

}
.pasteInput{
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  height: 158px;
  line-height: 156px;
  vertical-align: top;
  width: 158px;
  font-size: 19px;
}
.pasteInput:hover{
  cursor: pointer;
  border: 1px dashed #409EFF;
}
.pasteImgDiv{
  position: relative;
  display: inline-block;
  width: 158px;
  height: 158px;
}
.pasteImg{
  position: relative;
  width: 158px;
  height: 158px;
  border: 1px solid #c0ccda ;
  border-radius: 5px;
}
.close-position{
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 22px;
  background: #fff;
  border-radius: 50%;
  color: red;
  font-weight: bold;
  z-index: 9999;
}
.close-position:hover{
  cursor: pointer;
}
</style>
